<template>
  <view class="iot-container">
    <!-- 温湿度卡片 -->
    <view class="stats-card">
      <view class="stat-item">
        <!-- 温度图标（云链接） -->
        <image class="icon" src="https://cdn-icons-png.flaticon.com/512/869/869869.png"></image>
        <text class="stat-value">{{ hd }}℃</text>
      </view>
      <view class="stat-item">
        <!-- 湿度图标（云链接） -->
        <image class="icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965224.png"></image>
        <text class="stat-value">{{ tp }}%</text>
      </view>
    </view>

    <!-- LED控制区域 -->
    <view class="led-section">
      <view class="led-toggle">
        <!-- LED状态图标（云链接，根据状态切换） -->
        <image 
          class="led-icon" 
          :src="led ? 'https://cdn-icons-png.flaticon.com/512/296/296436.png' : 'https://cdn-icons-png.flaticon.com/512/296/296435.png'"
        ></image>
        <text class="led-label">控制LED</text>
      </view>
      <!-- 开关组件优化 -->
      <switch 
        class="custom-switch" 
        :checked="led" 
        @change="onLedSwitch"
      />
    </view>
  </view>
</template>

	<script>
	const { createCommonToken } = require('@/key.js')
	export default {
		data() {
			return {
				hd: '',
				tp: '',
				led: this.Whether,
				token: '',
			}
		},
		onLoad() {
			const params = {
				author_key: '+V4UByQHV+7su8qMkqpXirU0eZ8dNqWKbCeilAoqvKVMKuYjPzlYKCpNfmo3AIs4',
				version: '2022-05-01',
				user_id: '452343',
			}
			this.token = createCommonToken(params);
		},
		onShow(){
			this.fetchDevData();
			// setInterval(()=>{
			// 	this.fetchDevData();
			// },3000)
		},
		methods: {
			fetchDevData(){
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',
					method: 'GET',
					data: {
						product_id: 'T00ytQ85fi',
						device_name: 'demo01',
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						this.hd = res.data.data[0].value;
						this.tp = res.data.data[2].value;
						this.led = res.data.data[1].value === 'true' ? true : false;
					}
				});
			},
			onLedSwitch(event){
				let Whether = (event.detail.value);
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
					method: 'POST',
					data: {
						product_id: 'T00ytQ85fi',
						device_name: 'demo01',
						params: { "led": Whether }
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: (res) => {
						console.log();
					}
				});
			}
		}
	}
	</script>
	
	<style scoped>
	/* 全局容器 */
	.iot-container {
	  padding: 30rpx;
	  background-color: #f7fafc;
	}
	
	/* 标题样式 */
	.header {
	  text-align: center;
	  margin-bottom: 40rpx;
	}
	.title {
	  font-size: 48rpx;
	  font-weight: bold;
	  color: #2c3e50;
	}
	
	/* 温湿度卡片（核心视觉提升） */
	.stats-card {
	  display: flex;
	  justify-content: space-around;
	  background: #fff;
	  border-radius: 20rpx;
	  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
	  padding: 40rpx 20rpx;
	  margin-bottom: 50rpx;
	}
	.stat-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	.icon {
	  width: 60rpx;
	  height: 60rpx;
	  margin-bottom: 15rpx;
	}
	.stat-value {
	  font-size: 36rpx;
	  color: #333;
	  font-weight: 500;
	}
	
	/* LED控制区 */
	.led-section {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 40rpx;
	}
	.led-toggle {
	  display: flex;
	  align-items: center;
	  gap: 20rpx;
	}
	.led-icon {
	  width: 50rpx;
	  height: 50rpx;
	}
	.led-label {
	  font-size: 28rpx;
	  color: #666;
	}
	
	/* 开关组件优化（更大、更明显） */
	.custom-switch {
	  transform: scale(1.2); /* 放大开关 */
	  --switch-color: #42b983; /* 开关默认色 */
	  --switch-checked-color: #42b983; /* 开关选中色 */
	}
	</style>